<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <canvas id="box" width="600" height="600"></canvas>
<script type="text/javascript">
     var box=document.getElementById("box");
     var pen=box.getContext("2d");
     pen.clearRect(0,0,box.width,box.height);//清除画布
     pen.moveTo(214,287);
     pen.bezierCurveTo(4,120,105,33,217,123);
     pen.moveTo(217,123);
     pen.bezierCurveTo(295,35,459,96,214,287);
     pen.fillStyle="red";
     pen.fill();
     pen.stroke();


</script>
</body>
</html>